<template>
  <div class='login-outer'>
    <div class="bgp">
      <div style="height:250px">
        <div class="text">工程教育专业认证</div>
        <div class="text2">信息管理系统</div>
        <div class="littletext">广东海洋大学数学与计算机学院</div>
      </div>
      <img src="../../assets/styles/cl.jpg">
      </div>
    <div class="box2">
      <el-form
      :model='formdata'
      :rules='rules'
      ref='formdata'
      class='login-item'
      label-position="top"
      >
        <div style="color:#444;font:700 24px microsoft yahei;padding-bottom:10px">用户登录</div>
        <el-form-item  prop='username'>
          <el-input v-model='formdata.username' placeholder="用户名" ref="mark"  @keyup.native="jump($event)"></el-input>
        </el-form-item>
        <el-form-item  prop='password'>
          <el-input type="password" v-model='formdata.password' placeholder="密码" @keyup.native="jump($event)" @keyup.native.enter="handlogin ('formdata')" :show-password="true"></el-input>
        </el-form-item>
        <div to='' class='login-forget' @click="forget">忘记密码？</div>
        <!-- <el-form-item  prop='permissions'>
          <el-checkbox-group v-model='formdata.permissions' class='login-permissions' @keyup.native.enter="handlogin('formdata')">
            <el-checkbox label="超管"></el-checkbox>
            <el-checkbox label="课程负责人"></el-checkbox>
            <el-checkbox label="编撰者"></el-checkbox>
            <el-checkbox label="普通教师"></el-checkbox>
          </el-checkbox-group>
        </el-form-item> -->
        <el-form-item class='login-btncontent'>
          <el-button type='primary' class='login-btn' @click="handlogin('formdata')">登录</el-button>
          <!-- <el-button type='primary' class='login-btn' @click="register()">注册</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      formdata: {
        username: '',
        password: '',
        permissions: []
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
        // permissions: [
        //   { required: true, message: '请选择用户角色', trigger: 'change' }
        // ]
      }
    }
  },
  methods: {
    // 登录请求
    handlogin (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http.post('login', this.formdata)
            .then((res) => {
              // console.log(res)
              const data = res.data
              const status = data.code
              const msg = data.msg
              if (status === 200) {
                sessionStorage.setItem('token', data.token)
                // sessionStorage.setItem('tid', data.user.tid)
                this.$message.success('登录成功！')
                this.$router.push({name: 'home'})
              } else {
                this.$message.error(msg)
              }
            })
        } else {
          return false
        }
      })
    },
    register () {
      this.$router.push({name: 'register'})
    },
    // 忘记密码
    forget () {
      // console.log(123)
      this.$message.info('请联系管理员找回密码！')
    },
    // 按下按键时输入框的焦点转变
    jump (el) {
      var inputs = document.getElementsByTagName('input')
      for (var i = 0; i < inputs.length; i++) {
        if (i === 0) {
          if (el.keyCode === 13 || el.keyCode === 39 || el.keyCode === 40) {
            inputs[i + 1].focus()
            inputs[i].blur()
          }
        } else if (i === 1) {
          if (el.keyCode === 37 || el.keyCode === 38) {
            inputs[i - 1].focus()
            inputs[i].blur()
          }
        }
      }
    }
  },
  components: {},
  mounted () {
    this.$refs['mark'].focus()
  }
}
</script>

<style scoped lang='stylus'>
@import '~styles/varibles.styl';
.login-outer
  height 100%
  background-color $bgColor
  overflow hidden
  .box2
    width 50%
    height 100%
    float left
    overflow hidden
    display flex
    justify-content center
    align-items center
    .login-item
        margin-top 10px
        width 400px
        background-color #fff
        border-radius 1px
        padding 30px
        // border solid 1px #aaa
        box-shadow 10px 10px 10px -10px #aaa
        .login-permissions
          padding-top 30px
        .login-forget
          cursor pointer
          color #aaa
          text-align right
        .login-forget:hover
          color blue
        .login-btn
          width 100%
          margin-top 20px
          border-radius 5px
  .bgp
    width 50%
    height 100%
    float left
    img
      width 430px
      height 400px
      margin-left 100px
      margin-top 20px
    .text
      padding-left 250px
      padding-top 100px
      color #555
      font 700 54px KaiTi
      letter-spacing 5px
      text-align right
      min-width 500px
    .text2
      padding-left 290px
      color #555
      font 700 54px KaiTi
      letter-spacing 5px
      text-align right
      min-width 400px
    .littletext
      font 500 28px/70px microsoft yahei
      padding-left 300px
      color #888
      text-align right
      min-width 400px
      padding-right 10px
.login-btncontent
  padding-top 50px
</style>
